<script setup lang="ts">
  import type { BannerItem, CategoryItem, HotItem } from '@/types/home'
  import { onLoad } from '@dcloudio/uni-app'

  import { ref, computed } from 'vue'
  import CustomNavbar from './components/CustomNavbar.vue'
  import CategoryPanel from './components/CategoryPanel.vue'
  import noticeBar from '@node_modules/nutui-uni-app/noticebar/noticebar.vue'
  import HotPanel from './components/HotPanel.vue'
  import PageSkeleton from './components/PageSkeleton.vue'
  import XtxSwiper from '@/components/XtxSwiper.vue'
  import { findProducList, queryClCarousel, queryNoticeDetailList } from '@/services/home'
  import { baseURL } from '@/utils/http'
  import { useMemberStore } from '@/stores'
  import { getFilePage } from '@/services/file'

  const userInfo : any = useMemberStore().getUserInfo()

  // 获取轮播图数据
  const bannerList = ref<BannerItem[]>([])
  //通知公告
  const noticeList = ref<string[]>([])
  //公告详细数据
  let noticeObjList : any[] = []
  //热门产品
  const productList = ref<any[]>([])
  //推荐视频
  const hotVideo = ref<string>('')
  //推荐手册
  const hotManals = ref<string>('')
  //获取banner
  const getBannerList = async () => {
    queryClCarousel().then((res : any) => {
      console.log(res)
      bannerList.value = []
      if (res && res.list) {
        res.list.forEach((item : any) => {
          bannerList.value.push({
            link: item.picUrl,
            id: '',
            imgUrl: item.attachUrl,
            type: 1,
          })
        })
      }
      console.log(bannerList.value)

    })
  }
  const getNewProduct = () => {

  }
  //获取公告列表
  const getNoticeList = () => {
    queryNoticeDetailList({ userCode: userInfo.userCode }).then((res : any) => {
      console.log(res)
      noticeObjList = res
      noticeList.value = res.map((item : any) => item.title)
    }).catch(e => {
      console.log(e)
    })
  }

  // 获取前台分类数据
  const categoryList = ref<CategoryItem[]>([])
  const getHomeCategoryData = async () => { }

  // 是否加载中标记
  const isLoading = ref(false)

  //获取热门手册 热门视频和商品
  const getLatestFile = () => {
    //获取最新手册
    getFilePage({ dictTypeCode: 1 }).then((res : any) => {
      isLoading.value = false
      console.log(res)
      if (res && res.list.length > 0) {
        hotManals.value = res.list[0].coverUrl
      }
    }).catch(e => {
      isLoading.value = false
    })
    //获取最新视频
    getFilePage({ dictTypeCode: 3 }).then((res : any) => {
      isLoading.value = false
      console.log(res)
      if (res && res.list.length > 0) {
        hotVideo.value = res.list[0].coverUrl
      }
    }).catch(e => {
      isLoading.value = false
    })
    getData()
  }
  //获取最新产品
  const getData = () => {
    //查询
    findProducList({
      page,
      rows,
      channelCode,
      searchType,
      goodsOrigin,
      goodsType,
      vendibilityFlag,
      childFlag,
      hjFlag,
      bizType,
      goodsClassParentcode,
      searchParam
    }).then((res : any) => {
      uni.hideLoading()
      console.log(res)
      productList.value = res.list
      console.log(productList.value)
    }).catch(e => {
      uni.hideLoading()
    })
  }

  let page = 1
  const rows = 2
  const channelCode = 'delearchannelcode'//渠道
  const searchType = 'match_phrase'
  const vendibilityFlag = true
  const childFlag = true
  const hjFlag = true
  const dataStateStr = '0,2,3,4'
  const goodsType = '00,40,03'
  const goodsOrigin = '0,8'
  const bizType = 'sku'
  let goodsClassParentcode = ''
  const goodsName = ''
  const channelName = ''
  const searchParam = ''

  // 页面加载
  onLoad(async () => {
    isLoading.value = true
    // await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()])
    getBannerList()
    getNoticeList()
    getLatestFile()
    initMenuData()
    isLoading.value = false
  })

  // 当前下拉刷新状态
  const isTriggered = ref(false)
  // 自定义下拉刷新被触发
  const onRefresherrefresh = async () => {
    // 开始动画
    isTriggered.value = true
    // 加载数据

    // 关闭动画
    isTriggered.value = false
  }

  const initMenuData = () => {
    //功能菜单
    categoryList.value.push({
      icon: 'icon_menu_sign',
      id: '0',
      name: '签到',
      url: '/pages/sign/signIndex'
    })
    categoryList.value.push({
      icon: 'icon_menu_patrol',
      id: '1',
      name: '巡店管理',
      url: '/pagesMember/inspection/storelist'
    })
    categoryList.value.push({
      icon: 'icon_menu_performance',
      id: '2',
      name: '工作查看',
      url: '/pagesMember/workScan/workScan'
    })
    categoryList.value.push({
      icon: 'icon_menu_plan',
      id: '3',
      name: '工作计划',
      url: '/pagesMember/workCalendar/workCalendar'
    })
    categoryList.value.push({
      icon: 'icon_menu_competitiors',
      id: '4',
      name: '竞品提报',
      url: '/pagesMember/competition/index'
    })
    categoryList.value.push({
      icon: 'icon_menu_poster',
      id: '5',
      name: '海报',
      url: '/pagesMember/poster/poster'
    })
    categoryList.value.push({
      icon: 'icon_menu_video',
      id: '6',
      name: '视频',
      url: '/pagesMember/video/video'
    })
    categoryList.value.push({
      icon: 'icon_menu_picture',
      id: '7',
      name: '效果图',
      url: '/pagesMember/renderings/renderings'
    })
    categoryList.value.push({
      icon: 'icon_menu_design',
      id: '8',
      name: '设计方案',
      url: '/pagesMember/design/design'
    })
    categoryList.value.push({
      icon: 'icon_menu_handbook',
      id: '9',
      name: '定制手册',
      url: '/pagesMember/manuals/manuals'
    })
    categoryList.value.push({
      icon: 'icon_menu_file',
      id: '10',
      name: '文件',
      url: '/pagesMember/file/fileList'
    })
    categoryList.value.push({
      icon: 'icon_menu_todo',
      id: '11',
      name: '待办任务',
      url: '/pagesMember/inspection/pendingtask'
    })

  }
  /**
   * 点击通知栏
   */
  const noticeClick = (data : any) => {
    console.log(data)
    const clickItem : any = noticeObjList.find(item => item.title = data)
    console.log(clickItem.content)

    uni.navigateTo({
      url: `/pagesMember/announcement/announcement?data=${encodeURIComponent(clickItem.content)}`
    })
  }

  //更多 跳转
  const goMoreProduct = () => {
    uni.switchTab({
      url: '/pages/product/product'
    })
  }
  //跳转商品详情
  const itemClick = (item : any) => {
    uni.navigateTo({
      url: `/pages/product/productDetail?data=${JSON.stringify(item)}`
    })
  }
</script>

<template>
  <view class="viewport">
    <!-- <view class="bak-box" /> -->
    <view class="logo_container">
      <image class="logo_img" src="../../static/index/icon_logo.png"></image>
    </view>
    <scroll-view scroll-y class="scroll-view" show-scrollbar="false">

      <!-- 通知公告栏 -->
      <view class="notice">
        <nut-noticebar direction='vertical' :custom-color="`#394259`" :background="`rgba(179, 220, 246, 0.15)`"
          :list='noticeList' :speed='4' :standTime='2000' :clickMode='true' @click='noticeClick'>
          <template v-slot="{ item }">
            <span>{{ item.title }}</span>
          </template>
          <template #rightIcon>
            <image style="width: 32rpx; height:32rpx" src="../../static/index/icon_right_gray.png"></image>
          </template>
        </nut-noticebar>
      </view>
      <!-- 自定义轮播图 -->
      <XtxSwiper class="banner" :list="bannerList" />
      <view class="content">
        <!-- 分类面板 -->
        <CategoryPanel :list="categoryList" />
      </view>
      <view class="card_container" v-if="productList.length>=2">
        <view class="title">
          最新发布 <view class="navigator" @click="goMoreProduct">查看全部 <text class="icon-right"></text> </view>
        </view>
        <view class="case">

          <navigator class="case-item" @click="itemClick(productList[0])">
            <view class="image_container">
              <image class="image_good"
                :src="`${baseURL}${productList[0].dataPic}`||'https://shwwxcx.huidait.com/upload/admin/272adceeed25a27d23ca53567d68e0a6.png?imageMogr2/thumbnail/320x320/quality/70/strip/format/webp'">
              </image>
              <view class="tag">HUIDA 惠达</view>
            </view>

            <view class="text">{{productList[0].goodsName||''}}</view>
          </navigator>

          <navigator class="case-item" @click="itemClick(productList[1])">
            <view class="image_container">
              <image class="image_good"
                :src="`${baseURL}${productList[1].dataPic}`||'https://shwwxcx.huidait.com/upload/admin/272adceeed25a27d23ca53567d68e0a6.png?imageMogr2/thumbnail/320x320/quality/70/strip/format/webp'">
              </image>
              <view class="tag">HUIDA 惠达</view>
            </view>

            <view class="text">{{productList[1].goodsName||''}}</view>
          </navigator>
        </view>


      </view>
      <view class="card_container">
        <view class="title">定制手册</view>
        <image class="image_cover_container" :src="hotManals">
        </image>
      </view>
      <view class="card_container">
        <view class="title">宣传视频</view>
        <view>
          <image class="image_cover_container" :src="hotVideo">
            <view class="video">
              <image class="play-button" src="../../static/images/icon_right_arrow.png"></image>
            </view>
          </image>
        </view>
      </view>
      <view style="height:20rpx" />
    </scroll-view>
  </view>

</template>

<style lang="scss">
  @import '/src/pages/index/styles/category.scss';
  @import '/src/pages/index/styles/index.scss';

  page {
    height: 100%;
  }

  //样式穿透方式 去掉滚动条
  ::-webkit-scrollbar {
    display: block;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: auto !important;
    background: transparent;
    overflow: auto !important;
  }

  .viewport {
    height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
  }

  .scroll-view {
    flex: 1;
    height: 100%;
    padding-left: 20rpx;
    padding-right: 20rpx;
  }

  .notice {
    padding: 16rpx 0rpx;
  }

  .logo_container {
    margin-top: 108rpx;
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .logo_img {
    width: 260rpx;
    height: 72rpx;
  }

  .content {
    position: relative;
    z-index: 1;
  }

  .banner {
    position: relative;
    z-index: 2;
  }

  .case {
    margin-top: 35rpx;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .case-item {
      width: 46%;
      justify-content: center;
      flex-direction: column;
      padding-bottom: 15rpx;
      align-items: center;
      box-sizing: border-box;
      border-radius: 8rpx;
      background-color: #F9FAFB;



      .image_container {
        position: relative;
        width: 100%;
        height: fit-content;
        box-sizing: border-box;
        border-radius: 16rpx;
        border: 3rpx solid #00C1D1;
        overflow: hidden;
        /* 设置溢出隐藏 */

        .image_good {
          width: 100%;
          height: 320rpx;
        }

        .tag {
          text-align: center;
          line-height: 40rpx;
          height: 40rpx;
          width: 160rpx;
          left: 0;
          top: 0;
          color: white;
          font-size: 22rpx;
          position: absolute;
          border-top-left-radius: 16rpx;
          border-bottom-right-radius: 16rpx;
          background-color: #00C1D1;
        }

      }

      .text {
        text-align: left;
        margin-top: 40rpx;
        padding: 0rpx 10rpx;
        font-size: 26upx;
        color: #3d3d3d;
      }
    }
  }

  .video {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48rpx;
    height: 50rpx;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4rpx ;
    // border: 2rpx solid rgba(0, 0, 0, 0.4);
  }

  .play-button {
    width: 32rpx;
    height: 32rpx;
  }
  /* 区域 */
  .card_container {
    position: relative;
    z-index: 99;
    margin: 32rpx 5rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);

    .title {
      height: 40rpx;
      line-height: 40rpx;
      font-size: 32upx;
      font-weight: 500;
      margin-left: 5rpx;
      margin-right: 5rpx;
      color: #333;
      font-weight: bold;

      .navigator {
        font-weight: normal;
        font-size: 28rpx;
        color: #939393;
        float: right;
      }
    }
  }

  .image_cover_container {
    border-radius: 8rpx;
    box-sizing: border-box;
    height: 300rpx;
    margin-top: 24rpx;
    background-color: #f5f7f5;
  }



  .quick-image {
    width: 45rpx;
    margin-right: 24rpx;
    height: 45rpx;
  }

  .quick-image-end {
    width: 45rpx;
    margin-right: 14rpx;
    height: 45rpx;
  }

  .bak-box {
    width: 750rpx;
    height: 70rpx;
    opacity: 1;
    // filter: blur(3.6rpx);
    background-image: linear-gradient(180deg, #defef9 0%, #e2fdf9 47%, #f3f9f8 100%);
  }
</style>
